<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改样式属性</title>
    <style>
        .盒子 {
            /* 盒子 宽高 背景色 */
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        /* body 是整个页面 */
        body {
            background: url(./素材/desktop_1.jpg) no-repeat top center/cover;
            /* 背景图  路径  不平铺 存在向上 水平居中 /完全覆盖  */
        }
    </style>
</head>
<body>
<h3>修改元素样式属性</h3>
<p>
    还可以通过 JS 设置/修改标签元素的样式属性。 <br>
    <br>
    操作有3种： <br>
    1. 通过 style 属性操作CSS <br>
    2. 操作类名(className) 操作CSS <br>
    3. 通过 classList
</p>
<hr>

<h2>1.通过 style 属性操作CSS</h2>
<p>
    语法：<br>
    对象.style.样式属性 = 值
</p>
<p>
    注意： <br>
    1. 修改样式通过style属性引出 <br>
    2. 如果属性有-连接符，需要转换为小驼峰命名法 <br>
    3. 赋值的时候，需要的时候不要忘记加css单位
</p>
<hr>


<div class="盒子"></div>

<script>
    // 获取DOM元素
    const DOM_盒子 = document.querySelector('.盒子')
    // 通过 对象.style.样式属性 = '值', 修改背景颜色
    DOM_盒子.style.backgroundColor = '#2832c5'
    // 修改盒子 宽
    DOM_盒子.style.width = '400px' // 记住: .style 是修改的CSS样式, '值' 别忘了跟单位
    // 还可以通过对象, 添加CSS样式
    DOM_盒子.style.border = '8px solid #BB18FF' // 边框线: 线宽度 实线 颜色


    // --------- 案例 随机变换页面背景图片 --------
    // 声明函数 封装随机更换页面背景图
    function 更换页面背景图(最小值, 最大值) {
        // 获取DOM元素
        const 页面 = document.querySelector('body')
        // 获取指定范围的 随机数
        let 随机数 = Math.floor(Math.random() * (最大值 - 最小值 + 1)) + 最小值
        // 修改CSS样式, 属性值
        页面.style.background = `url(./素材/desktop_${随机数}.jpg) no-repeat top center/cover` // 背景图片属性设置

        // document.body.style.backgroundImage = `url(./素材/desktop_${随机数}.jpg)`
        // 由于body是整个页面,它是唯一标签. 也可以用这种写法来写
    }

    // 调用函数, 并且传参
    更换页面背景图(1, 10)
</script>
</body>
</html>